<template>
  <div class="superior-login-container">
    <div class="login-content">
      <div class="login-left">
        <div class="brand-container">
          <MedicineBoxOutlined class="brand-icon" />
          <h1 class="brand-name">口腔诊疗平台</h1>
        </div>
        <div class="slogan">
          <h2>上级账号管理系统</h2>
          <p>资料审核与管理平台</p>
        </div>
        <div class="illustration">
          <AuditOutlined class="illustration-icon" />
        </div>
      </div>
      
      <div class="login-right">
        <div class="login-form-container">
          <h2 class="welcome-text">上级账号登录</h2>
          <p class="login-desc">请登录您的上级账号以进行资料审核</p>
          
          <a-form
            :model="loginForm"
            name="superior-login"
            @finish="handleLogin"
            :rules="rules"
            layout="vertical"
          >
            <a-form-item name="username" label="账号">
              <a-input
                v-model:value="loginForm.username"
                placeholder="请输入上级账号"
                size="large"
              >
                <template #prefix>
                  <UserOutlined class="site-form-item-icon" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item name="password" label="密码">
              <a-input-password
                v-model:value="loginForm.password"
                placeholder="请输入密码"
                size="large"
              >
                <template #prefix>
                  <LockOutlined class="site-form-item-icon" />
                </template>
              </a-input-password>
            </a-form-item>
            <a-form-item name="captcha" label="验证码">
              <div class="captcha-container">
                <a-input
                  v-model:value="loginForm.captcha"
                  placeholder="请输入验证码"
                  size="large"
                >
                  <template #prefix>
                    <SafetyCertificateOutlined class="site-form-item-icon" />
                  </template>
                </a-input>
                <div class="captcha-image" @click="refreshCaptcha">
                  1234
                </div>
              </div>
            </a-form-item>
            <a-form-item>
              <div class="form-actions">
                <a-checkbox v-model:checked="loginForm.remember">记住我</a-checkbox>
                <a class="forgot-link">忘记密码?</a>
              </div>
            </a-form-item>
            <a-form-item>
              <a-button
                type="primary"
                html-type="submit"
                size="large"
                block
                class="login-button"
              >
                登录
              </a-button>
            </a-form-item>
          </a-form>
          
          <div class="back-link">
            <span>不是上级账号?</span>
            <a @click="goToStandardLogin">返回普通登录</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { 
  UserOutlined, 
  LockOutlined, 
  SafetyCertificateOutlined,
  MedicineBoxOutlined,
  AuditOutlined
} from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 登录表单
const loginForm = reactive({
  username: '',
  password: '',
  captcha: '',
  remember: false
})

// 表单验证规则
const rules = {
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ],
  captcha: [
    { required: true, message: '请输入验证码', trigger: 'blur' }
  ]
}

// 处理登录
const handleLogin = (values) => {
  // 模拟登录请求
  message.loading({ content: '登录中...', key: 'login' })
  
  // 模拟API请求延迟
  setTimeout(() => {
    // 这里应该是实际的登录API调用
    message.success({ content: '登录成功！', key: 'login' })
    
    // 设置账号类型为上级账号
    localStorage.setItem('accountType', 'superior')
    // 设置用户名
    localStorage.setItem('username', loginForm.username || '审核员')
    
    // 登录成功后跳转到资料审核页面
    router.push('/document-review')
  }, 1500)
}

// 刷新验证码
const refreshCaptcha = () => {
  // 实际应用中，这里应该调用后端API获取新的验证码
  message.info('验证码已刷新')
}

// 返回普通登录页面
const goToStandardLogin = () => {
  router.push('/login')
}
</script>

<style scoped>
.superior-login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.login-content {
  display: flex;
  width: 900px;
  height: 600px;
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.login-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 40%;
  padding: 40px;
  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  color: white;
}

.brand-container {
  display: flex;
  align-items: center;
}

.brand-icon {
  font-size: 32px;
  margin-right: 12px;
}

.brand-name {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}

.slogan {
  margin-top: 40px;
}

.slogan h2 {
  font-size: 28px;
  margin-bottom: 12px;
  font-weight: 600;
}

.slogan p {
  font-size: 16px;
  opacity: 0.8;
}

.illustration {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}

.illustration-icon {
  font-size: 120px;
  opacity: 0.8;
}

.login-right {
  width: 60%;
  padding: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-form-container {
  width: 100%;
  max-width: 360px;
}

.welcome-text {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #262626;
}

.login-desc {
  color: #8c8c8c;
  margin-bottom: 32px;
}

.captcha-container {
  display: flex;
  gap: 12px;
}

.captcha-image {
  width: 100px;
  height: 40px;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  cursor: pointer;
  border-radius: 4px;
  user-select: none;
}

.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.forgot-link {
  color: #1890ff;
  cursor: pointer;
}

.login-button {
  height: 44px;
  font-size: 16px;
}

.back-link {
  margin-top: 24px;
  text-align: center;
}

.back-link a {
  color: #1890ff;
  margin-left: 8px;
  cursor: pointer;
}
</style>
